<template>
	<view class="container">
		<view class="header">
			<text class="title">智能答题</text>
			<text class="subtitle">基于您的学习记录生成的个性化题目</text>
		</view>
		
		<!-- Progress Bar -->
		<view class="progress-container">
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
			</view>
			<text class="progress-text">{{ currentIndex + 1 }}/{{ questions.length }}</text>
		</view>
		
		<!-- Question Card -->
		<view class="question-card" v-if="questions.length > 0 && currentIndex < questions.length">
			<view class="question-header">
				<text class="question-type">{{ questions[currentIndex].subjectArea }}</text>
				<text class="question-difficulty" :class="difficultyClass">{{ getDifficultyText() }}</text>
			</view>
			<text class="question-text">{{ questions[currentIndex].text }}</text>
			
			<!-- Options -->
			<view class="options-container">
				<view 
					class="option-item" 
					v-for="(option, index) in questions[currentIndex].options" 
					:key="index"
					:class="{ 
						'selected': selectedOption === index,
						'correct': showAnswer && index === questions[currentIndex].correctAnswer,
						'wrong': showAnswer && selectedOption === index && index !== questions[currentIndex].correctAnswer
					}"
					@click="selectOption(index)"
				>
					<text class="option-label">{{ ['A', 'B', 'C', 'D'][index] }}</text>
					<text class="option-text">{{ option }}</text>
				</view>
			</view>
			
			<!-- Action Buttons -->
			<view class="actions">
				<button 
					class="btn check-btn" 
					v-if="!showAnswer && selectedOption !== null" 
					@click="checkAnswer"
				>
					检查答案
				</button>
				<button 
					class="btn next-btn" 
					v-if="showAnswer" 
					@click="nextQuestion"
				>
					{{ currentIndex < questions.length - 1 ? '下一题' : '查看结果' }}
				</button>
			</view>
		</view>
		
		<!-- Results Screen -->
		<view class="results-screen" v-if="showResults">
			<image src="/static/quiz-complete.png" mode="aspectFit" class="results-image"></image>
			<text class="results-title">答题完成!</text>
			<text class="results-score">得分: {{ correctCount }}/{{ questions.length }}</text>
			<view class="results-stats">
				<view class="stat-item">
					<text class="stat-value">{{ correctCount }}</text>
					<text class="stat-label">正确</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ questions.length - correctCount }}</text>
					<text class="stat-label">错误</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ Math.round(correctCount / questions.length * 100) }}%</text>
					<text class="stat-label">正确率</text>
				</view>
			</view>
			<button class="btn restart-btn" @click="restartQuiz">再试一次</button>
			<button class="btn home-btn" @click="goToHome">返回首页</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 状态变量
const questions = ref([
	{
		id: 1,
		text: "在人工智能领域，以下哪种算法不属于监督学习?",
		options: [
			"线性回归",
			"K均值聚类",
			"支持向量机",
			"决策树"
		],
		correctAnswer: 1,
		difficulty: 2,
		subjectArea: "人工智能"
	},
	{
		id: 2,
		text: "以下哪种数据结构适合用于实现先进先出（FIFO）的操作？",
		options: [
			"栈",
			"队列",
			"二叉树",
			"哈希表"
		],
		correctAnswer: 1,
		difficulty: 1,
		subjectArea: "数据结构"
	},
	{
		id: 3,
		text: "在计算机网络中，以下哪个协议工作在网络层？",
		options: [
			"HTTP",
			"TCP",
			"IP",
			"FTP"
		],
		correctAnswer: 2,
		difficulty: 2,
		subjectArea: "计算机网络"
	},
	{
		id: 4,
		text: "下列哪个不是Python的数据类型？",
		options: [
			"List",
			"Dictionary",
			"Tuple",
			"Array"
		],
		correctAnswer: 3,
		difficulty: 1,
		subjectArea: "编程语言"
	},
	{
		id: 5,
		text: "在高等数学中，函数f(x)=sin(x)的导数是什么？",
		options: [
			"cos(x)",
			"-sin(x)",
			"-cos(x)",
			"tan(x)"
		],
		correctAnswer: 0,
		difficulty: 3,
		subjectArea: "高等数学"
	}
]);

const currentIndex = ref(0);
const selectedOption = ref(null);
const showAnswer = ref(false);
const showResults = ref(false);
const correctCount = ref(0);

// 计算属性
const progressPercent = computed(() => {
	return ((currentIndex.value + 1) / questions.value.length) * 100;
});

const difficultyClass = computed(() => {
	const difficulty = questions.value[currentIndex.value].difficulty;
	if (difficulty === 1) return 'easy';
	if (difficulty === 2) return 'medium';
	return 'hard';
});

// 方法
function getDifficultyText() {
	const difficulty = questions.value[currentIndex.value].difficulty;
	if (difficulty === 1) return '简单';
	if (difficulty === 2) return '中等';
	return '困难';
}

function selectOption(index) {
	if (!showAnswer.value) {
		selectedOption.value = index;
	}
}

function checkAnswer() {
	showAnswer.value = true;
	if (selectedOption.value === questions.value[currentIndex.value].correctAnswer) {
		correctCount.value++;
	}
}

function nextQuestion() {
	if (currentIndex.value < questions.value.length - 1) {
		currentIndex.value++;
		selectedOption.value = null;
		showAnswer.value = false;
	} else {
		showResults.value = true;
	}
}

function restartQuiz() {
	currentIndex.value = 0;
	selectedOption.value = null;
	showAnswer.value = false;
	showResults.value = false;
	correctCount.value = 0;
}

function goToHome() {
	uni.switchTab({
		url: '/pages/index/index'
	});
}

// 实际应用中，这里应该根据用户的学习记录从服务器获取个性化题目
function loadPersonalizedQuestions() {
	// 模拟从服务器获取题目
	uni.showLoading({
		title: '加载题目中...'
	});
	
	// 模拟网络请求延迟
	setTimeout(() => {
		// 实际应用中，这里应调用API获取题目
		uni.hideLoading();
	}, 1000);
}

// 生命周期钩子
onMounted(() => {
	loadPersonalizedQuestions();
});
</script>

<style>
.container {
	padding: 40rpx 30rpx;
	background-color: #f8f9fa;
	min-height: 100vh;
}

.header {
	margin-bottom: 40rpx;
	text-align: center;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 26rpx;
	color: #666;
}

/* Progress Bar Styles */
.progress-container {
	margin-bottom: 40rpx;
	display: flex;
	align-items: center;
}

.progress-bar {
	flex: 1;
	height: 16rpx;
	background-color: #e9ecef;
	border-radius: 100rpx;
	overflow: hidden;
	margin-right: 20rpx;
}

.progress-fill {
	height: 100%;
	background-color: #007AFF;
	border-radius: 100rpx;
	transition: width 0.3s ease;
}

.progress-text {
	font-size: 24rpx;
	color: #666;
	min-width: 60rpx;
	text-align: right;
}

/* Question Card Styles */
.question-card {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	margin-bottom: 30rpx;
}

.question-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.question-type {
	font-size: 26rpx;
	background-color: #e6f2ff;
	color: #007AFF;
	padding: 6rpx 16rpx;
	border-radius: 100rpx;
}

.question-difficulty {
	font-size: 26rpx;
	padding: 6rpx 16rpx;
	border-radius: 100rpx;
}

.question-difficulty.easy {
	background-color: #e6ffee;
	color: #28a745;
}

.question-difficulty.medium {
	background-color: #fff8e6;
	color: #fd7e14;
}

.question-difficulty.hard {
	background-color: #ffe6e6;
	color: #dc3545;
}

.question-text {
	font-size: 34rpx;
	font-weight: 500;
	color: #333;
	line-height: 1.5;
	margin-bottom: 40rpx;
}

/* Options Styles */
.options-container {
	margin-bottom: 40rpx;
}

.option-item {
	display: flex;
	align-items: center;
	padding: 24rpx;
	background-color: #f1f3f5;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	transition: all 0.3s ease;
}

.option-item:active {
	opacity: 0.8;
}

.option-item.selected {
	background-color: #e6f2ff;
	border: 2rpx solid #007AFF;
}

.option-item.correct {
	background-color: #e6ffee;
	border: 2rpx solid #28a745;
}

.option-item.wrong {
	background-color: #ffe6e6;
	border: 2rpx solid #dc3545;
}

.option-label {
	width: 50rpx;
	height: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	color: #666;
	font-size: 28rpx;
	font-weight: bold;
	border-radius: 50%;
	margin-right: 20rpx;
}

.option-text {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
}

/* Action Buttons */
.actions {
	display: flex;
	justify-content: center;
}

.btn {
	min-width: 200rpx;
	padding: 20rpx 40rpx;
	border-radius: 100rpx;
	font-size: 30rpx;
	font-weight: 500;
	border: none;
	text-align: center;
}

.check-btn {
	background-color: #007AFF;
	color: #fff;
}

.next-btn {
	background-color: #28a745;
	color: #fff;
}

/* Results Screen Styles */
.results-screen {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 50rpx 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.results-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.results-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.results-score {
	font-size: 50rpx;
	font-weight: bold;
	color: #007AFF;
	margin-bottom: 40rpx;
}

.results-stats {
	display: flex;
	justify-content: space-around;
	width: 100%;
	margin-bottom: 50rpx;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.stat-value {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #666;
}

.restart-btn {
	background-color: #007AFF;
	color: #fff;
	margin-bottom: 20rpx;
}

.home-btn {
	background-color: #6c757d;
	color: #fff;
}
</style> 